<template>
    <div>
        <el-form ref="form" :disabled="view" :model="form" label-width="160px" label-suffix="：">
            <el-form-item label="直播标题" prop="name">
                <el-input v-model="form.name" placeholder="请输入直播名称" />
            </el-form-item>
            <el-form-item label="封面图" prop="cover">
                <ImageUpload :url.sync="form.cover" :width="80" :height="80" />
            </el-form-item>
            <el-form-item label="直播店铺" prop="shop_id">
                <el-select v-model="form.shop_id" filterable placeholder="请选择">
                    <el-option v-for="item in genderOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="直播开始至结束时间">
                <template>
                    <div class="block">
                        <el-date-picker
                            v-model="value1"
                            type="datetimerange"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd hh:mm"
                            value-format="timestamp"
                        />
                    </div>
                </template>
            </el-form-item>
            <!-- <button @click="add">aa</button> -->
            <el-form-item label="权重排序" prop="weigh">
                <el-input-number v-model="form.weigh" :step="1" :min="0" step-strictly controls-position="right" />
                <span class="form-last-text">权重越大，排序越靠前</span>
            </el-form-item>
            <el-form-item label="选品" prop="type">
                <el-button :loading="loading" type="primary" @click="goodsSelectVisible = true">添加商品</el-button>
            </el-form-item>
            <el-form-item>
                <el-table :data="form.live_product_list">
                    <el-table-column prop="id" label="ID" />
                    <el-table-column prop="number" label="编码" />
                    <el-table-column prop="title" label="商品" />
                    <el-table-column prop="business_classify" label="分类" />
                    <el-table-column prop="sale_price" label="销售价" />
                    <el-table-column prop="shop.name" label="店铺" />
                </el-table>
            </el-form-item>
        </el-form>
        <goodsSelect v-model="goodsSelectVisible" :checked="form.live_product_list" @select="handleGoodsSelect" />
    </div>
</template>
<script>
import mixin from '@/mixins/mixin'
import goodsSelect from '@/components/GoodsSelect/index.vue'
export default {
    components: {
        goodsSelect
    },
    mixins: [mixin],
    props: {
        id: {
            type: [Number, String],
            default: ''
        },
        view: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            listdata: [],
            goodsSelectVisible: false,
            product: [],
            loading: false,
            value1: [],
            time: [],
            genderOptions: [],
            visible: true,
            multiple: false,
            dialogMode: false,
            pageRouter: {
                create: 'liveBroAdd',
                edit: 'liveBroEdit'
            },
            dialogVisible: false,
            form: {
                id: this.id,
                name: '',
                cover: '',
                shop_id: '',
                start_at: '',
                end_at: '',
                weigh: '',
                product_id: [],
                live_product_list: []
            }
        }
    },
    created() {
        if (this.form.id != '') {
            this.getInfo()
        }
    },
    mounted() {
        this.getGender()
    },
    methods: {
        // add() {
        //     console.log(this.value1)
        // },
        handleGoodsSelect(goods) {
            this.form.live_product_list = JSON.parse(JSON.stringify(goods))
            this.form.product_id = goods.map(item => {
                return {
                    id: item.id
                }
            })
        },
        getGender() {
            this.$api.post('/shop/search/shop-filter').then(res => {
                this.genderOptions = res.data.data
            })
        },
        getInfo() {
            this.loading = true
            this.$api.post('/live/live/detail', { id: this.form.id }).then(res => {
                this.loading = false
                const date = res.data.data
                this.form = Object.assign(this.form, date)
                this.form.product_id = date.live_product_list.map(item => {
                    return {
                        id: item.id
                    }
                })
                this.tableData = this.form.live_product_list
                this.time[0] = (Date.parse(new Date(this.form.start_at)))
                this.time[1] = (Date.parse(new Date(this.form.end_at)))
                this.value1.push(...this.time)
                console.log(this.value1)
            })
        },
        submit(callback) {
            this.form.start_at =  Math.round(new Date().getTime(this.value1[0]) / 1000).toString()
            this.form.end_at =  Math.round(new Date().getTime(this.value1[1]) / 1000).toString()
            console.log(this.form)
            if (this.form.id == '') {
                this.$refs['form'].validate(valid => {
                    let product_id = JSON.stringify(this.form.product_id)
                    if (valid) {
                        this.$api.post('/live/live/create', {
                            ...this.form,
                            product_id
                        }).then(() => {
                            this.$message.success({
                                message: '新增成功',
                                center: true
                            })
                            callback && callback()
                        })
                    }
                })
            } else {
                this.$refs['form'].validate(valid => {
                    let product_id = JSON.stringify(this.form.product_id)
                    if (valid) {
                        this.$api.post('/live/live/update', {
                            ...this.form,
                            product_id
                        }).then(() => {
                            this.$message.success({
                                message: '编辑成功',
                                center: true
                            })
                            callback && callback()
                        }).catch(() => { })
                    }
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .el-pagination {
        margin-top: 20px;
    }
    .input {
        width: 230px;
        margin-top: 10px;
    }
    .formAdd {
        width: 600px;
    }
</style>

